export const getIconVue = ({ name, componentName, svgHtml }: { name: string; componentName: string; svgHtml: string }) =>
  `<template>
  ${svgHtml}
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { props, useIcon } from '../common'

export default defineComponent({
  name: '${componentName}',
  props: props,
  emits: {
    click: (ev: MouseEvent) => true,
  },
  setup(props, { emit }) {
    const { cls, innerStyle, onClick } = useIcon('${name.replace('icon-', '')}', props, emit)
    return { cls, innerStyle, onClick }
  },
})
</script>
`

export const getComponentIndex = ({ componentName }: { name: string; componentName: string }) =>
  `import ${componentName} from './index.vue'
export { ${componentName} }
`
export const getDmyVueIcon = ({ imports, components }: { imports: string[]; components: string[] }) =>
  `import type { App, Plugin } from 'vue'
import type { DmyIconOptions } from '@idmy/ui-util'
${imports.join('\n')}
import { Icon } from './icon'
import { IconHover } from './icon-hover'
import { IconFeedback } from './icon-feedback'

const icons: Record<string, Plugin> = {
  ${components.join(',\n  ')},
  Icon,
  IconHover,
  IconFeedback,
}

export {
  ${components.join(',\n  ')},
  Icon,
  IconHover,
  IconFeedback,
}

const install = (app: App, options?: DmyIconOptions) => {
  for (const key of Object.keys(icons)) {
    app.use(icons[key], options)
  }
}

export default {
  ...icons,
  install,
}
`

export const getIndex = ({ exports }: { exports: string[] }) => ``

export const getType = ({ exports }: { exports: string[] }) =>
  `// @ts-nocheck

declare module 'vue' {
  export interface GlobalComponents {
${exports.map(item => `${' '.repeat(4)}${item}`).join('\n')}
  }
}

export {}
`
